<template>
  <div class="main_container" style="background-color: #324157">
    <div class="btn_operation">
      <el-row>
        <div class="btn_operation_left" v-show="loadState === '关机'">
          <el-button @click="qukuan" class="qukuan" type="primary" :disabled="role === '管理员登录成功'" round>取款</el-button>
          <el-button @click="cunkuan" class="cunkuan" type="success" :disabled="role === '管理员登录成功'" round>存款</el-button>
          <el-button @click="zhuanzhang" class="zhuanzhang" type="info" :disabled="role === '管理员登录成功'" round>转账</el-button>
        </div>

        <!--屏幕-->
        <div class="main_content">

          <div class="content_show">

            <!--服务式loading-->
            <el-button
                    style="display: none"
                    type="primary"
                    @click="openFullScreen1">
            </el-button>
            <el-button
                    style="display: none"
                    type="primary"
                    @click="openFullScreen2">
            </el-button>

            <!--未登录显示欢迎页-->
            <div class="welcome" v-show="isShowWelcome === true">
              <span style="font-size: 24px;color: ghostwhite">欢迎使用自动取款机仿真系统</span>
              <br> <br><br><br><br><br><br><br><br><br>
              <span style="font-size: 18px;color: ghostwhite;margin-left: 80px">不过请先登录.....</span>
            </div>

            <!--登录输入框-->
            <el-form class="login_form" :model="form" ref="form" label-width="80px" v-if="isShowusernameInput">
              <el-form-item v-show="isusernameHidden === true" style="width: 400px;">
                <span style="color: ghostwhite">输入卡号</span>
                <el-input v-model="form.accountId"/>
              </el-form-item>
              <el-form-item v-show="isPassHidden === true" style="width: 400px;">
                <span style="color: ghostwhite">输入密码</span>
                <el-input v-model="form.password" type="password"/>
              </el-form-item>
              <el-button @click="loginSubmit" type="primary" style="margin-left: 300px;margin-top: 10px;display: none">确 定</el-button>
            </el-form>

            <div class="content_area" v-show="isShowScreen === true" style="width: 700px; height: 400px;float: left;margin-left: 20px;margin-top:0;position: absolute">
              <!--复制f12中的textarea才能实现样式的修改-->
              <textarea v-model="desc" autocomplete="off" class="el-textarea__inner" style="min-height: 410px;margin-top: 80px;font-size: 24px" :disabled="role === '管理员登录成功'"></textarea>
            </div>

          </div>
        </div>

        <div class="btn_operation_right" v-show="loadState === '关机'">
          <el-button @click="yuer" class="yuer" :disabled="role === '管理员登录成功'" round>余额</el-button>
          <el-button @click="getLog" @dblclick="!isShowLog" class="rizhi" type="danger" :disabled="role === '管理员登录成功'" round>日志</el-button>
          <el-button @click="cardOut" v-model="cardState" class="tuika" type="warning" :disabled="role === '管理员登录成功'" round>退卡</el-button>
          <el-button @click="backHandle" v-model="cardState" class="back" type="warning" :disabled="role === '管理员登录成功'" round>返 回</el-button>
        </div>

      </el-row>
    </div>

    <!--读卡取卡口-->
    <div class="main_right">
      <!--点击事件不能在input中监听 且父class样式要为position: relative 子class样式要为position: absolute; z-index: 2-->
      <!--禁止div的点击监听事件
          :class="loadState === '开机' ? 'form-onlyRead' : ''"
          定义.form-onlyRead{ pointer-events: usernamene; }
       -->
      <div class="right_atm_out" @click="printDetail">
        <input type="text" placeholder="打印条据" style="width: 250px;height: 18px;margin-left: 20px;" :class="loadState === '开机' ? 'form-onlyRead' : ''" disabled="disabled"/>
      </div>
      <div class="right_atm_read" @click="readCard" :class="loadState === '开机' ? 'form-onlyRead' : ''">
        <input type="text" placeholder="读卡登录" style="width: 250px;height: 18px;margin-left: 20px;z-index: 200" disabled="disabled"/>
      </div>
      <!--输入的键盘按钮-->
      <div class="btn_input">
        <!--登录时输入账户按钮组-->
        <el-row class="btn_login_username_put" style="width: 300px; height: 300px;margin-left:0;margin-top: -30px" v-if="isLoginusernamePutBtn">
          <el-button @click="btnLoginusernameHandler(index)" v-for="(item, index) in btnArrays" :key="index" :type="item.type" style="height: 50px; width: 50px;margin-left: 16px;margin-top: 20px;" circle><span style="margin-top: -10px; font-size: 12px">{{item.num}}</span></el-button>
        </el-row>
        <!--登录时输入密码按钮组-->
        <el-row class="btn_login_pass_put" style="width: 300px; height: 300px;margin-left:0;margin-top: -30px" v-if="isLoginPassPutBtn">
          <el-button @click="btnLoginPassHandler(index)" v-for="(item, index) in btnArrays" :key="index" :type="item.type" style="height: 50px; width: 50px;margin-left: 16px;margin-top: 20px;" circle><span style="margin-top: -10px; font-size: 12px">{{item.num}}</span></el-button>
        </el-row>
        <!--界面操作取款按钮组-->
        <el-row class="btn_qunkuan_put" style="width: 300px; height: 300px;margin-left:0;margin-top: -30px" v-if="isQunkuanPut">
          <el-button @click="btnQukuanHandler(index)" v-for="(item, index) in btnArrays" :key="index" :type="item.type" style="height: 50px; width: 50px;margin-left: 16px;margin-top: 20px;" circle><span style="margin-top: -10px; font-size: 12px">{{item.num}}</span></el-button>
        </el-row>
        <!--界面操作存款按钮组-->
        <el-row class="btn_cunkuan_put" style="width: 300px; height: 300px;margin-left:0;margin-top: -30px" v-if="isCunkuanPut">
          <el-button @click="btnCunkuanHandler(index)" v-for="(item, index) in btnArrays" :key="index" :type="item.type" style="height: 50px; width: 50px;margin-left: 16px;margin-top: 20px;" circle><span style="margin-top: -10px; font-size: 12px">{{item.num}}</span></el-button>
        </el-row>
        <!--界面操作转账按钮组-->
        <el-row class="btn_zhuanzhang_put" style="width: 300px; height: 300px;margin-left:0;margin-top: -30px" v-if="isZhuanZhangPut">
          <el-button @click="btnZhuanZhangHandler(index)" v-for="(item, index) in btnArrays" :key="index" :type="item.type" style="height: 50px; width: 50px;margin-left: 16px;margin-top: 20px;" circle><span style="margin-top: -10px; font-size: 12px">{{item.num}}</span></el-button>
        </el-row>
      </div>
    </div>

    <div class="footer">

      <!--开关机按钮-->
      <div class="turn_on_off">
        <el-button type="primary" v-model="loadState" @click="turn_on_off">{{loadState}}</el-button>
      </div>

      <div class="foot_in">
        <input type="text" style="width: 600px;height: 20px" disabled="disabled"/>
      </div>
      <div class="foot_out">
        <input type="text" style="width: 600px;height: 20px" disabled="disabled"/>
      </div>

    </div>

    <div v-if="loadState==='开机'" class="off_tip" style="float: left;position: absolute;width: 300px;height: 100px;margin-top: 200px;margin-left: 420px;font-size: 30px">
      <span style="color: ghostwhite">已关机</span>
    </div>

    <el-dialog title="操作日志" :visible.sync="isShowLog">
      <table width="100%" style="margin-top: -10px; text-align: center; border-spacing:0px 10px;">
        <tr>
          <th>
            日志编号
          </th>
          <th>
            当前账户
          </th>
          <th>
            操作日志
          </th>
          <th>
            操作时间
          </th>
        </tr>
        <tr>
          <td>
            {{attr[0]}}
          </td>
          <td>
            {{sarr[0]}}
          </td>
          <td>
            {{attr[2]}}
          </td>
          <td>
            {{attr[4] | formatTimer}}
          </td>
        </tr>
      </table>
    </el-dialog>


   <!--打印当前账单对话框-->
    <el-dialog title="打印成功!" :visible.sync="isShowPrint">
      <el-form>
        <el-form-item label="服务状态" :label-width="formLabelWidth">
          <span>{{printRes[0]}}</span>
        </el-form-item>
        <el-form-item label="账单编号" :label-width="formLabelWidth">
          <span>{{printRes[1]}}</span>
        </el-form-item>
        <el-form-item label="出账时间" :label-width="formLabelWidth">
          <span>{{printRes[2] | formatTimer}}</span>
        </el-form-item>
        <el-form-item label="转账账户" :label-width="formLabelWidth">
          <span>{{printRes[3]}}</span>
        </el-form-item>
        <el-form-item label="transfer" :label-width="formLabelWidth">
          <span>{{printRes[7]}}</span>
        </el-form-item>
        <el-form-item label="ATM编号" :label-width="formLabelWidth">
          <span>{{printRes[8]}}</span>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--转账对话框-->
    <el-dialog
            title="请输入转入账号"
            :visible.sync="isShowTranfer"
            width="30%"
            >
      <div>
        <el-input type="text" v-model="receiver"></el-input>
        <el-row class="btn_tranfer_put" style="width: 340px; height: 300px;margin-left:0;margin-top: 0px">
          <el-button @click="btnTranferHandler(index)" v-for="(item, index) in btnArrays" :key="index" :type="item.type" style="height: 50px; width: 50px;margin-left: 26px;margin-top: 20px;" circle><span style="margin-top: -10px; font-size: 12px">{{item.num}}</span></el-button>
        </el-row>
      </div>
    </el-dialog>

    <!--管理员登录提示权限对话框-->
    <el-dialog
            title="提示"
            :visible.sync="isShowAdminTip"
            width="60%"
            >
      <span style="font-size: 20px">尊敬的管理员, 您的操作权限只有开关机，将不能使用其他任何功能!</span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        isShowAdminTip: false,
        printRes: '',
        attr: '',
        role: '',
        isShowTranfer: false,
        receiver: '',
        logData: {},
        sarr: {},
        currentPage: '',
        totalPages: '',
        totalElements: '',
        numOfCurrentPageElement: '',
        pageSize: '',
        msg: '',
        total: '',
        isShowPrint: false,
        loading: false,
        form: { //登录信息
          accountId: '',
          password: ''
        },
        btnArrays: [
          {
            num: 1,
            type: 'primary'
          },
          {
            num: 2,
            type: 'success'
          },
          {
            num: 3,
            type: 'info'
          },
          {
            num: '取消',
            type: 'success'
          },
          {
            num: 4,
            type: 'warning'
          },
          {
            num: 5,
            type: 'danger'
          },
          {
            num: 6,
            type: 'info'
          },
          {
            num: 7,
            type: 'primary'
          },
          {
            num: 8,
            type: 'success'
          },
          {
            num: 9,
            type: 'warning'
          },
          {
            num: 0,
            type: 'success'
          },
          {
            num: '.',
            type: 'primary'
          },
          {
            num: '清除',
            type: 'info'
          },
          {
            num: '重置',
            type: 'warning'
          },
          {
            num: '确定',
            type: 'success'
          }
        ],
        loadState: '开机',
        isShowScreen: false, //是否显示屏幕
        isusernameHidden: false, //表单是否显示输入账户
        isPassHidden: false, //表单是否显示输入密码
        isShowWelcome : false, //是否显示欢迎页状态
        isShowusernameInput: false, //是否显示输入账户输入框
        isLogin: false, //是否已登录
        cardState: '',//卡是否存在 1存在 0不存在
        formLabelWidth: '120px',
        isPut: false,
        isShowLog: false, //是否显示日志
        isLoginusernamePutBtn: false, //是否显示输入账户按钮组
        isLoginPassPutBtn: false, //是否显示输入密码按钮组
        isQunkuanPut: false, //是否显示取款按钮组
        isCunkuanPut: false, //是否显示存款按钮组
        isZhuanZhangPut: false, //是否显示转账按钮组
        userArrayList: [], //一个mock数组
        desc: '请选择对应的操作....',
      }
    },

    //时间过滤器 格式化
    filters: {
      formatTimer: function(value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d + " " + h + ":" + m;
      }
    },

    methods: {

      //登录
      loginSubmit() {
        setTimeout(() => {
          this.cardState = 1 //只要一登录就设置卡状态为已存在
          this.isPassHidden = false
          this.$refs.form.validate(valid => {
            // 后台的accountId是要求Integer类型
            const user = {
              accountId: parseInt(this.form.accountId),
              password: this.form.password,
            }
            if (valid) {
              const _this = this
              this.postKeyValueRequest("/account/login", user).then(res => {
                if (res) {
                  if (res.code === 3) { //密码错误
                    _this.cardState = 2
                    _this.isShowWelcome = false
                    _this.isPassHidden = true
                    _this.isLogin = false
                    _this.isShowScreen = false
                    _this.isLoginusernamePutBtn = false
                    _this.isLoginPassPutBtn = true
                    _this.form.accountId = user.accountId // 记录当前输入的账户名
                    _this.form.password = ''
                  }
                  if (res.code === 5) {
                    _this.from.accountId = ''
                    _this.from.password = ''
                    this.cardState = 0
                    this.isShowWelcome = true
                    this.isPassHidden = false
                    this.isLoginusernamePutBtn = false
                    this.isLoginPassPutBtn = true
                  }
                  if (res.code === 4) { //密码错误次数过多，银行卡冻结1分钟！
                    _this.from.accountId = ''
                    _this.from.password = ''
                    _this.cardState = 0
                    _this.isShowWelcome = true
                    _this.isPassHidden = false
                    _this.isLoginusernamePutBtn = false
                    _this.isLoginPassPutBtn = false
                  }
                  if (res.code === 0) { //储户登录成功
                    this.role = res.msg
                    console.log(this.role)
                    _this.isLogin = true
                    _this.isShowScreen = true
                    _this.cardState = 1 //正常登录后卡状态为1 已存在
                    _this.form.accountId = ''
                    _this.form.password = ''
                  }
                  //如果是管理员登录 则只能有开关机功能 不能操作其他的功能
                  if (res.code === 1) { // 管理员登录成功
                    this.role = res.msg
                    this.isLoginusernamePutBtn = false
                    this.isLoginPassPutBtn = false
                    this.isShowWelcome = false
                    this.isShowScreen = true
                    this.isShowAdminTip = true
                    setTimeout(() => {
                      this.isShowAdminTip = false
                    }, 2000)
                  }
                }
              })
            } else {
              console.log("参数验证不合法！");
              return false;
            }
          });
        })
      },

      //loading
      openFullScreen1() {
        const loading = this.$loading({
          lock: true,
          text: '注销...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 1000);
      },
      openFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 1000);
      },

      //开关控制
      turn_on_off() {
        if (this.loadState === '开机') {
          this.getRequest('/openAtm').then(res => {
            if (res) {
              console.log(res)
              if (res.msg === '自动取款机启动成功') {
                /*
                因为只有在角色是管理员的情况下 除了开关机 其他功能均不可用 此处是在无论是管理员开机还是用户开机
                都是进入欢迎页 并没有登录 此时均不能可以有功能操作权限
                此处设置角色为 '管理员登录成功' 是可以禁用功能按钮 不会影响之后登录后角色 每次登录都要是当前的角色
                */
                this.role = '管理员登录成功'
              }
              this.isShowWelcome = true
              this.loadState = '关机'
              this.isLogin = false //未登录状态
              this.cardState = 0 //一开机指定卡还是未存在的状态
              this.form.accountId = '' //这哩可以解决管理员登录成功后遗留的表单账户名清空
              this.from.password = ''
            }
          })
        } else if (this.loadState === '关机') {
          this.getRequest('/closeAtm').then(res => {
            if (res) {
              setTimeout(() => {
                //为了保证开机后任何操作时都能关机
                this.isShowWelcome = false
                this.isLogin = false
                this.isShowLog = false
                this.isShowScreen = false
                this.isusernameHidden = false
                this.isPassHidden = false
                this.isQunkuanPut = false
                this.isCunkuanPut = false
                this.isZhuanZhangPut = false
                this.isLoginusernamePutBtn = false
                this.isLoginPassPutBtn = false
                this.loadState = '开机'
                this.from.accountId = ''
                this.form.password = ''
              }, 1000)
              this.openFullScreen1()
            }
          })
        }
      },

      //用户点击收据打印
      printDetail() {
        if (this.role === '管理员登录成功') {
          this.isShowAdminTip = true
          setTimeout(() => {
            this.isShowAdminTip = false
          }, 1000)
        }
        if (this.role !== '管理员登录成功') {
          this.postRequest('/account/printTicket?receiver=1&amount=200&businessType=2').then(res => {
            if (res) {
              this.isShowPrint = true
              this.printRes = res
              let pri = []
              const prim = res
              for (let i in prim) {
                pri.push(prim[i]) //把对象装入数组
              }
              this.printRes = pri
              setTimeout(() => {
                this.isShowPrint = false
              }, 4000)
            }
          })
        }
        this.isShowusernameInput = false
      },

      //用户点击读卡口登录
      readCard() {
        this.isusernameHidden = true
        if (this.cardState === 0) {
          this.isusernameHidden = true
          this.isShowScreen = false
          this.isLoginPassPutBtn = false

          this.isShowWelcome = false
          this.isShowusernameInput = true
          this.isLoginusernamePutBtn = true
        } else if (this.cardState === 1) {
          this.$message.warning('卡已存在，请先退卡!')
          //记得做数据清空还有显示处理
          this.form.accountId = ''
          this.form.password = ''
          this.isusernameHidden = false
          this.isPassHidden = false
          this.isLoginusernamePutBtn = false
          this.isLoginPassPutBtn = false
          this.isQunkuanPut = false
          this.isCunkuanPut = false
          this.isZhuanZhangPut = false
        } else if (this.cardState === 2) {
          this.form.password = ''
          this.isusernameHidden = true
          this.isShowScreen = false
          this.isLoginPassPutBtn = false
          this.isShowWelcome = false
          this.isShowusernameInput = true
          this.isLoginusernamePutBtn = true
        }
      },

      //获取日志
      getLog () {
        this.isShowLog = true
        this.getRequest('/log/queryLog?currentPage=1&pageSize=1').then(res => {
          if (res) {
            this.logData = res.data[0] //得到对象
            let arr = [] //为了将对象转变成数组
            const logData = this.logData
            for (let i in logData) {
              arr.push(logData[i])
            }
            this.attr = arr
            console.log(this.attr[1])

            const logData2 = this.attr[1]

            let sarr = []
            for (let i in logData2) {
              sarr.push(logData2[i])
            }
            this.sarr = sarr
            console.log(sarr)
          }
        })
      },

      //取款
      qukuan() {
        this.desc = '请输入取款金额 :'
        this.isShowLog = false
        this.isQunkuanPut = true
        this.isCunkuanPut = false
        this.isZhuanZhangPut = false
        this.isLoginPassPutBtn = false
      },

      qukuanSubmit() {
        this.postRequest('/account/takeCash?amount=' + this.desc.substring(9, this.desc.length-2)).then(res => {
          if (res) {
            this.desc = '您已成功取款' + this.desc.substring(9, this.desc.length-2) + '元'
          }
        })
      },

      //存款
      cunkuan() {
        this.desc = '请输入存款金额 :'
        this.isShowLog = false
        this.isQunkuanPut = false
        this.isCunkuanPut = true
        this.isZhuanZhangPut = false
        this.isLoginPassPutBtn = false
      },
      cunkuanSubmit() {
        const amount =  parseInt(this.desc)
        this.postRequest('/account/saveCash?amount=' + amount).then(res => {
          if (res) {
            this.desc = '您已成功存入' + this.desc.substring(9, this.desc.length-2) + '元'
          }
        })
      },

      //转账
      zhuanzhang() {
        this.desc = '请输入转账金额 :'
        this.isShowLog = false
        this.isQunkuanPut = false
        this.isCunkuanPut = false
        this.isZhuanZhangPut = true
        this.isLoginPassPutBtn = false
      },
      //输入转账人按钮组
      btnTranferHandler(index) {
        this.index = index
        //进行拼串显示
        this.receiver += this.btnArrays[index].num
        if (this.btnArrays[index].num === '取消') {
          this.isShowTranfer = false
          this.receiver = ''
          this.desc = '请输入转账金额:'
        }
        if (this.btnArrays[index].num === '清除') {
          //实现退格删除
          this.receiver = this.receiver.substring(0, this.receiver.length-3).trim()
        }
        if (this.btnArrays[index].num === '重置') {
          this.receiver = ''
        }
        if (this.btnArrays[index].num === '确定') {
          // 因为'确定'是遍历数组元素 所以提交表单时需要去掉 '确定'二字,-3是删除一个字符, -2是删除两个字符
          this.receiver = this.receiver.substring(0, this.receiver.length-2).trim()
          this.tranferConfirm()
        }
      },
      //确定转账
      tranferConfirm() {
        //正则表达式校验
        var numReg = /^[0-9]*$/
        var numRe = new RegExp(numReg)
        if (!numRe.test(this.receiver)) {
          this.$message({
            type: 'warning',
            message: '请输入数字 ',
            duration: 1000,
            showClose: true,
          })
          this.receiver = ''
          return false
        } else if (this.receiver === '1') {
          this.$message({
            type: 'warning',
            message: '不能给自己转账! ',
            duration: 1000,
            showClose: true,
          })
          this.receiver = ''
          return false
        }
        this.postRequest('account/transfer?receiverAccountId=' + this.receiver + '&amount=' + parseInt(this.desc)).then(res => {
          if (res) {
            this.isShowTranfer = false
            this.desc = '您已成功向储户' + this.receiver + '转入' + this.desc.substring(9, this.desc.length-2) + '元'
          }
          this.receiver = ''
        })
      },

      //余额
      yuer() {
        this.getRequest('/account/getBalance').then(res => {
          if (res) {
            this.desc = '当前余额:' + res.amount
            this.isShowLog = false
            //确保在页面不刷新情况下 按钮组不显示
            this.isQunkuanPut = false
            this.isCunkuanPut = false
            this.isZhuanZhangPut = false
            this.isLoginusernamePutBtn = false
            this.isLoginPassPutBtn = false
          }
        })
      },

      //登录输入账户按钮组
      btnLoginusernameHandler(index) {
        this.index = index
        //进行拼串显示
        this.form.accountId += this.btnArrays[index].num
        if (this.btnArrays[index].num === '清除') {
          //实现退格删除
          this.form.accountId = this.form.accountId.substring(0, this.form.accountId.length-3)
        }
        if (this.btnArrays[index].num === '重置') {
          this.form.accountId = ''
        }
        if (this.btnArrays[index].num === '确定') {
          // 因为'确定'是遍历数组元素 所以提交表单时需要去掉 '确定'二字,-3是删除一个字符, -2是删除两个字符
          this.form.accountId = this.form.accountId.substring(0, this.form.accountId.length-2)
          this.isusernameHidden = false
          this.isPassHidden = true
          this.isLoginusernamePutBtn = false
          this.isLoginPassPutBtn = true
        }
      },

      //登录输入密码按钮组
      btnLoginPassHandler(index) {
        this.index = index
        //进行拼串显示
        this.form.password += this.btnArrays[index].num
        if (this.btnArrays[index].num === '清除') {
          //实现退格删除
          this.form.password = this.form.password.substring(0, this.form.password.length-3).trim()
        }
        if (this.btnArrays[index].num === '重置') {
          this.form.password = ''
        }
        if (this.btnArrays[index].num === '确定') {
          //小坑 因为'确定'是遍历数组元素 所以提交表单时需要去掉 '确定'二字,-3是删除一个字符, -2是删除两个字符
          this.form.password = this.form.password.substring(0, this.form.password.length-2).trim()
          this.loginSubmit()
        }
      },

      //取款按钮组
      btnQukuanHandler(index) {
        this.index = index
        console.log(index)
        //得到当前数组对应下标的num值
        console.log(this.btnArrays[index].num)
        //进行拼串显示
        this.desc += this.btnArrays[index].num
        if (this.btnArrays[index].num === '清除') {
          //实现退格删除
          this.desc = this.desc.substring(0, this.desc.length-3)
          console.log(this.desc)
        }
        if (this.btnArrays[index].num === '重置') {
          this.desc = '请输入取款金额 :'
        }
        if (this.btnArrays[index].num === '确定') {
          //去掉 '确定'和前缀提示字符处理
          this.desc = this.desc.substring(9, this.desc.length-2)
          console.log(this.desc)
          //正则表达式校验
          var numReg = /^[0-9]*$/
          var numRe = new RegExp(numReg)
          if (!numRe.test(this.desc.substring(9, this.desc.length-2))) {
            this.$message({
              type: 'warning',
              message: '请输入数字 ',
              duration: 1000,
              showClose: true,
            })
            this.desc = '请输入取款金额 :'
            return false
          } else {
            this.qukuanSubmit()
          }
        }
      },

      //存款按钮组
      btnCunkuanHandler(index) {
        this.index = index
        console.log(index)
        //得到当前数组对应下标的num值
        console.log(this.btnArrays[index].num)
        //进行拼串显示
        this.desc += this.btnArrays[index].num
        if (this.btnArrays[index].num === '清除') {
          //实现退格删除
          this.desc = this.desc.substring(0, this.desc.length-3)
          console.log(this.desc)
        }
        if (this.btnArrays[index].num === '重置') {
          this.desc = '请输入存款金额 :'
        }
        if (this.btnArrays[index].num === '确定') {
          //去掉 '确定' 二字处理
          this.desc = this.desc.substring(9, this.desc.length-2)
          //正则表达式校验
          var numReg = /^[0-9]*$/
          var numRe = new RegExp(numReg)
          if (!numRe.test(this.desc.substring(9, this.desc.length-2))) {
            this.$message({
              type: 'warning',
              message: '请输入数字 ',
              duration: 1000,
              showClose: true,
            })
            this.desc = '请输入存款金额 :'
            return false
          } else {
            this.cunkuanSubmit()
          }
        }
      },

      //转账按钮组
      btnZhuanZhangHandler(index) {
        this.index = index
        console.log(index)
        //得到当前数组对应下标的num值
        console.log(this.btnArrays[index].num)
        //进行拼串显示
        this.desc += this.btnArrays[index].num
        if (this.btnArrays[index].num === '清除') {
          //实现退格删除
          this.desc = this.desc.substring(0, this.desc.length-3)
          console.log(this.desc)
        }
        if (this.btnArrays[index].num === '重置') {
          this.desc = '请输入转账金额 :'
        }
        if (this.btnArrays[index].num === '确定') {
          //去掉 '确定' 二字处理
          this.desc = this.desc.substring(9, this.desc.length-2)
          //正则表达式校验
          var numReg = /^[0-9]*$/
          var numRe = new RegExp(numReg)
          if (!numRe.test(this.desc.substring(9, this.desc.length-2))) {
            this.$message({
              type: 'warning',
              message: '请输入数字 ',
              duration: 1000,
              showClose: true,
            })
            this.desc = '请输入转账金额 :'
            return false
          } else {
            //确定后选择转账人
            this.isShowTranfer = true
          }
        }
      },

      //返回处理
      backHandle() {
        this.desc = '请选择对应的操作...'
      },

      //退卡处理
      cardOut() {
        this.getRequest('/account/logout').then(res => {
          if (res)  {
            this.cardState = 0 //退卡 设置卡状态为不存在
            //清空上次表单记录
            this.form.accountId = ''
            this.form.password = ''
            //退卡后就得回到欢迎页
            this.isShowWelcome = true
            this.isShowScreen = false
            this.isLogin = false
            this.isShowLog = false
            this.isShowScreen = false
            this.isusernameHidden = false
            this.isPassHidden = false
            this.isQunkuanPut = false
            this.isCunkuanPut = false
            this.isZhuanZhangPut = false
            this.isLoginusernamePutBtn = false
            this.isLoginPassPutBtn = false
            this.role = '管理员登录成功'  //设置该角色下没有业务功能可以操作
            //此时卡的状态应该为 0 为退卡状态
            console.log(this.cardState)
          }
        })
      },

    }
  }
</script>

<style>
  .main_container{width: 1400px;height: 1000px;margin-left:0;position: absolute;margin-top: 0;}
  .btn_operation{width: 930px;height: 600px;float: left;margin-left: 10px;margin-top: -40px}
  .btn_operation_left{float: left;width: 90px;height: 600px;margin-top: 42px}
  .btn_operation_left .qukuan{margin-top: 40px;margin-left: 10px}
  .btn_operation_left .cunkuan{margin-top: 80px}
  .btn_operation_left .zhuanzhang{margin-top: 80px}
  .main_content{width: 720px;height: 500px;float: left}
  .main_content span{font-size: 20px}
  .btn_operation_right{float: left;width: 90px;height: 600px;margin-left: 14px;margin-top: 50px;position: relative}
  .btn_operation_right .yuer{margin-top: 30px;position: absolute;margin-left: 10px}
  .btn_operation_right .rizhi{margin-top: 150px;position: absolute}
  .btn_operation_right .tuika{margin-top: 280px;position: absolute;}
  .btn_operation_right .back{margin-top: 400px;position: absolute;}
  .content_show{width: 620px; height: 400px;float: left;}
  .main_right{width: 300px;height: 600px;float: left;margin-left: -6px;position: relative}
  .right_atm_out{margin-left: 0;margin-top: 44px}
  .right_atm_read{margin-left: 0;margin-top: 90px;position: absolute}
  .btn_input{margin-top: 200px}
  .foot_in{width:1000px;height:30px;float: left;margin-top: -114px;margin-left: 248px}
  .foot_out{width:1000px;height:30px;float: left;margin-top: -40px;margin-left: 248px}
  #log_table{width: 700px}
  .welcome{width: 600px;height: 100px;position: absolute;margin-top: 80px;margin-left: 220px}
  .login_form{width: 600px;height: 100px;position: absolute;margin-top: 100px;margin-left: 130px}
  .footer{width: 1000px; height: 100px;float: left;position: relative}
  /*父class设置样式position: relative 子class样式设置z-index: 2 才能点击监听*/
  .footer .turn_on_off{width: 100px;float: left;height: 30px;margin-left: 34px;margin-top: -100px;z-index: 2}
  .footer .foot_in{width:600px;height:30px;float: left;margin-top: -114px;margin-left: 160px}
  .footer .foot_out{width:600px;height:30px;float: left;margin-top: -60px;margin-left: 160px}
  /*禁止鼠标点击事件*/
  .form-onlyRead{pointer-events: none;}
</style>
